<hr/>
<h1>这个是Home组件</h1>
<h1>引入header组件</h1>
<!-- 父组件给子组件传值 -->
<!-- 1、在调用子组件的时候给它一个title2 -->
<!-- title2是子组件的属性，title是父组件的属性 -->
<!-- list是列表  hello是方法  更狠的是 home 是整个组件 -->
<app-header [title2]="title" [keywords2]="keywords" [list3]="list" [hello2]="hello" [home]="this"></app-header>

<h1>1、引入图片</h1>
<img src="assets/images/1.jpg" alt="图片" class="img1" />
&nbsp;&nbsp;&nbsp;&nbsp;
<img [src]="imagedizhi" alt="图片" class="img1"> 

<h1>2、循环数据，显示数据的索引(key)</h1>
<ul>
    <li *ngFor="let item of list;let i=index;">
        <p>索引值：{{i}}</p>
        <h3>{{item.title}}</h3>
        <p>{{item.content}}</p>
    </li>
</ul>

<h1>3、条件判断语句 *ngIf="expression"</h1>
<p *ngIf="flag">这个是ngIf="flag"</p>
<p *ngIf="!flag">这个是ngIf="!flag"</p>
<ul>
    <li *ngFor="let item of list;let key = index;" >
        <p *ngIf="key==1" class="red">索引：{{key}}---{{item.title}}----{{item.content}}</p>
        <p *ngIf="key!=1" >索引：{{key}}---{{item.title}}----{{item.content}}</p>
    </li>
</ul>

<h1>4、条件判断语句 *ngSwith</h1>
<div [ngSwitch]="orderStatus">
    <div *ngSwitchCase="1">1、已经支付</div>
    <div *ngSwitchCase="2">2、支付并确认订单</div>
    <div *ngSwitchCase="3">3、表示已经发货</div>
    <div *ngSwitchCase="4">4、已经收货</div>
    <div *ngSwitchDefault>无效</div>
</div>

<h1>5、属性[ngClass]、[ngStyle]</h1>
<div class="red">
    ngclass演示 (尽量不要用dom来改变class)
</div>
<div [ngClass]="{'red': true,'big':true}">
        ngclass演示 
</div>
<div [ngClass]="{'red': !flag,'big':flag}">
        ngclass演示 
</div>

<strong>6、循环数组，让数组的第二个元素的样式为red</strong>
<ul>
    <li *ngFor="let item of list;let key=index;" [ngClass]="{'red':key==1,'big':key==2}" >
        {{key}}----{{item.title}}----{{item.content}}
    </li>
</ul>
<p style="color:red">我是一个p标签</p>
<p [ngStyle]="{'color': 'red'}">我是一个p标签</p>
<p [ngStyle]="{'color': attr}">我是一个p标签</p>

<h1>7、管道符</h1>
<p>常用的管道符，都已经定义了，还可以自定义。{{today| date:"yyyy-MM-dd HH:mm:ss"}}</p>

<h1>8、事件</h1>
<input type="button" value="点击" (click)="run()"/><br/>
{{title}}
<input type="button" value="改变数据" (click)="changeDate(3)" />

<h1>9、表单事件 事件对象</h1>
keydown
<input  type="text" (keydown)="keydown($event)"/>

keyup
<input type="text" (keyup)="keyup($event)"/>
<br/>

<input  type="button" value="点击变色" (click)="bianse($event)"/>

<h1>10、双向数据绑定</h1>
<input type="text" [(ngModel)]="keywords" />
{{keywords}}
<input type="button" (click)="click2()" value="点击输出keywords" />
<hr/>
